<template>
	<div class="app">
		<div class="title">
			<!-- 搜索栏部分开始 -->
			<div class="search">
				<el-input placeholder="评论ID" v-model="CommentID" clearable></el-input>
				<el-input placeholder="用户姓名" v-model="username" clearable></el-input>
				<el-input placeholder="商品名称" v-model="commodity" clearable></el-input>
				<el-input placeholder="评论内容" v-model="content" clearable></el-input>
				<el-button type="primary" icon="el-icon-search" @click="searchvalue">查找</el-button>
			</div>
			<!-- 搜索栏部分结束 -->
			<!-- 表格内容部分开始 -->
			<div class="tablelist">
				<el-table :data="tableData" border style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
					<el-table-column prop="id" label="评论编号" align="center"></el-table-column>
					<el-table-column prop="content" label="评论内容" align="center"></el-table-column>
					<el-table-column prop="" label="评论分数" align="center"></el-table-column>
					<el-table-column prop="" label="用户ID" align="center"></el-table-column>
					<el-table-column prop="" label="用户昵称" align="center"></el-table-column>
					<el-table-column prop="" label="订单ID" align="center"></el-table-column>
					<el-table-column prop="" label="商品ID" align="center"></el-table-column>
					<el-table-column prop="" label="商品名称" align="center"></el-table-column>
					<el-table-column prop="gmtUpdate" label="评论时间" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" @click="Delete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 表格内容部分结束 -->
            <!-- 分页部分开始 -->
			<div class="paging">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
				 :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total='total' layout="total, sizes, prev, pager, next, jumper">
				</el-pagination>
			</div>
			<!-- 分页部分结束 -->

		</div>
	</div>
</template>
<script>
	import {
        addlist,
        dellist
	} from '../encapsulation/comments';
	export default {
		data() {
			return {
				CommentID: "", //评论ID
				username: "", //用户姓名
				commodity: "", //商品名称
				content: "", //评论内容
				pageNo: 1, // 默认页数
				pageSize: 20, // 页面条数
				total: 0, // 总共条数
				tableData: [], //表格内容
			};
		},
		methods: {
			//   获取接口数据
			getlist() {
				let data = {
                    id:this.CommentID,  //评论id
                    userName:this.username,  //用户姓名
                    spuName:this.commodity,  //商品名称
                    content:this.content,  //评论内容
					pageNo: this.pageNo, //页码
					limit: this.pageSize, //页码长度
				}
				addlist(data).then((res) => {
                    this.tableData = res.data.data.items;
                    this.pageNo=res.data.data.pageNo, // 默认页数
                    this.pageSize=res.data.data.pageSize, // 页面条数
                    this.total=res.data.data.total // 总共条数
					
				})
			},
			// 查找
			searchvalue() {
			  (this.pageNo = 1), (this.limit = 20), this.getlist();
			},
			//分页
			handleSizeChange(val) {
				this.pageSize = val;
				this.getlist();
			},
			handleCurrentChange(val) {
				this.pageNo = val;
				this.getlist();
            },
            // 删除
            Delete(index, row) {
      let _this = this;
      let data = {
        id:row.id,
      };
      _this
        .$confirm(
          "此操作将永久删除该评论---" + row.id + "---, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          dellist(data).then(() => {
            _this.tableData.splice(index, 1);
            this.$message.success({
              message: "删除成功",
            });
          });
          this.getlist();
        })
        .catch(() => {
          this.$message.info("您已取消删除");
        });
    },
		},
		created() {
			this.getlist()
		}
	};
</script>
<style scoped lang="less">
.app {
  padding: 20px;
  height: 100%;
  overflow: hidden !important;
  position: relative;
}
.title {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
}
.search {
  display: flex;
  padding-bottom: 10px;
}
.search/deep/.el-input {
  width: 200px;
  height: 40px;
  padding: 0 3px;
}
</style>